<template>
	<div class="edit-group">
		<el-dialog title="编辑分组" :visible.sync="showEditTips" width="50%" :before-close="cancelEditGroup">
			<div class="group-name">
				<el-form :model="groupData" ref="editGroupRef" label-width="100px">
					<el-form-item label="分组名称" prop="groupName" :rules="groupData.groupNameRules">
						<el-input v-model="groupData.groupName"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelEditGroup">取 消</el-button>
				<el-button type="primary" @click="getEditGroupName">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		showEditTips: {
			type: Boolean,
			default: () => false
		},
		editGroupData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			groupData: this.editGroupData
		};
	},

	methods: {
		cancelEditGroup() {
			this.$emit('cancelEditGroup');
		},
		getEditGroupName() {
			this.$refs['editGroupRef'].validate(valid => {
				if (valid) {
					this.$emit('getEditGroupName', this.groupData);
				} else {
					this.$message.error('请填写完整信息！');
				}
			});
		}
	}
};
</script>

<style></style>
